<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body><!-- 表单：采集用户信息，并提交到服务器
	           表单元素：form
		     input控件元素：采集用户信息的元素
			  必须type类型属性    属性值     text            文本框
			                               password        密文 文本框
										   sudmit          提交     form表单控制
										   button          按钮 结合JS 结合value【html4】
										   reset           重置     form表单控制
										   color           颜色控件
										   datetime-local  本地日历控件 
										   date            年月日插件
										   time            时间插件
										   week            周插件
										   range           滑块
										   file            上传文件
										   radio           单选框  结合name 属性
		                                   checkbox        复选框
									-------checked默认选择【单复选框】
									       image           图片按钮结合src属性
										   hidden          隐藏 结合JS
		-->
		<h1>登录页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text" /><br>
		<input >
		密码：<input type="password" /><br>
		<input type="submit" />
		<input type="button" value="自定义按钮" />
		<!-- html5写法 结合JS -->
		<button>触发按钮</button>
		<input type="reset" /><br><br>
		<input type="color"/>
		<input type="datetime-local"/>
		<input type="date"/>
		<input type="time"/>
		<input type="week"/>
		<input type="range"/>
		<input type="file"/><br><br>
		男<input type="radio"name="sex"checked="checked"/>
		女<input type="radio"name="sex"/>
		<input type="checkbox"checked/>螺蛳粉
		<input type="checkbox"/>麻辣烫
		<input type="checkbox"/>臭豆腐
		<input type="image"src="img/1.jpg"width="150px"height="150px"/>
		<input type="hidden" />
		<h4>表单元素：多行文本元素  cols行属性  rows列属性</h4>
		建议：<textarea  cols="20"rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据</h4>
		<!-- 层级元素 快捷键：select>option -->
		发车时间：<select >
			<option>00:00--24：00</option>
			<option>00:00--06：00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		</select>
		<h4>表单元素：细节元素 </h4>
		<!-- 层级元素 快捷键：details>summary+div-->
		<details>
			<summary>征婚启事</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum possimus aliquam non. Nihil consequuntur labore architecto? Animi temporibus enim, quisquam quam praesentium vero maxime earum quas reprehenderit facilis blanditiis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti saepe laudantium inventore. Minima earum veritatis fugiat consectetur repellendus provident ipsum esse facere, vero reprehenderit illum nemo, molestias nulla nobis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorum molestias voluptate a fuga. Id dignissimos nihil incidunt officiis aspernatur molestias quo recusandae asperiores ipsam ut, quidem, assumenda fugiat suscipit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi hic, fugiat veniam id inventore animi iure illo quibusdam voluptate qui, tenetur accusamus officiis. Doloremque hic aliquam dolore officia voluptatem quibusdam.</div>
		</details>
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五 <mark>放假啦</mark>
		<!-- 度量元素 必须属性 value="0~1默认值"  min属性   max属性-->
		电量：<meter value="50"min="0"max="100"></meter>
	</body>
</html>